<template>
  <view class="container" @touchmove.stop.prevent="handleTouchMove">
    <view class="list-card">
      <view class="list-item" v-for="(item, index) in menuItems" :key="index" @click="handleAction(item)">
        <view class="item-left">
          <uni-icons :type="item.icon" size="20" class="icon" />
          <text class="title">{{ item.label }}</text>
        </view>
        <view class="item-right">
          <text v-if="item.badge" class="badge">{{ item.badge }}</text>
          <text v-if="item.value" class="value">{{ item.value }}</text>
          <uni-icons v-if="!item.noArrow" type="right" size="16" color="#999" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { label: '浏览历史', icon: 'eye', path: '/pages/history/history' },
        { label: '收藏', icon: 'star', path: '/pages/star/star', badge: 12 },
        { label: '下载与缓存', icon: 'download', badge: '256MB',path:'/pages/myDownload/myDownload' },
        { label: '清除缓存数据', icon: 'trash', action: 'clearCache' },
        { label: '版本号', icon: 'info', value: 'v1.0', noArrow: true },
        { label: '检查更新', icon: 'reload', action: 'checkUpdate' }
      ]
    }
  },
  methods: {
    handleTouchMove() {
      return false
    },
    handleAction(item) {
      if(item.action) {
        this[item.action]()
      } else if(item.path) {
        uni.navigateTo({ url: item.path })
      }
    },
    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定清除所有缓存数据吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '清理中...' })
            uni.removeStorageSync('starList');
			const starList = JSON.parse(uni.getStorageSync("starList") || "[]");
			this.menuItems[1].badge=starList.length;
			uni.hideLoading();
			uni.showToast({
				title:'清理成功',
				icon:'success'
			})
          }
        }
      })
    },
    checkUpdate() {
      uni.showLoading({ title: '检测中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showModal({
          title: '已是最新版本',
          content: '当前版本 v1.0 已是最新',
          showCancel: false
        })
      }, 1000)
    }
  },
  mounted() {
  	
  },
  onShow() {
  	const starList = JSON.parse(uni.getStorageSync("starList") || "[]");
  	this.menuItems[1].badge=starList.length;
	const downloadList=JSON.parse(uni.getStorageSync("downloadList") || "[]");
	this.menuItems[2].badge=downloadList.length;
  },
  onReady() {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
  }
}
</script>

<style lang="scss">
.container {
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 50rpx;
  background: #f5f6fa;
  padding: 20rpx;
  
  .list-card {
    max-height: calc(100vh - 150rpx);
    overflow: hidden;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .item-left {
        display: flex;
        align-items: center;
        flex: 1;

        .icon {
          margin-right: 24rpx;
          color: $uni-color-primary;
        }

        .title {
          font-size: 30rpx;
          color: #333;
        }
      }

      .item-right {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .badge {
          background: #ff4d4f;
          color: white;
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
        }

        .value {
          color: #999;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>